<!--
 * @Description: 线下活动 -- activity
 * @Author: your name
 * @Date: 2023-12-09
 * @LastEditTime: 2023-12-09
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="activity heart_w">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动报名</el-breadcrumb-item>
        <!-- <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
      </el-breadcrumb>

      <div class="filter">
        <div>活动类型：</div>
        <ul class="filter-content">
          <li
            class="filter-item"
            v-for="(it, i) in list_d"
            :key="i"
            :class="{ active_t: activity == i }"
            @click="activityFn(i)"
          >
            {{ it.name }}
          </li>
        </ul>
      </div>

      <!-- 内容区域 -->
      <div class="curriculum_list">
        <div class="recommend heart_w">
          <el-row>
            <el-col :span="6" v-for="item in 2" :key="item">
              <a href="#">
                <el-image
                  lazy
                  src="http://cremb-zsff.oss-cn-beijing.aliyuncs.com/9e2b7202102051439162726.jpg"
                >
                </el-image>

                <div>
                  <div class="title">
                    初入职场老师教你10个常见的面试问题，助你节节高升
                  </div>
                  <div class="browse-money">
                    <i class="iconfont icon-huaban15"></i>
                    <div>22/07/30 00:00~22/07/31 00:00</div>
                  </div>
                  <div class="label-count">
                    <div class="money">
                      ￥
                      <span>0.02</span>
                    </div>
                    <div>78人已下载</div>
                  </div>
                </div>
              </a>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'activity',
  data() {
    return {
      list_d: [
        { name: '未开始' },
        { name: '报名中' },
        { name: '报名结束' },
        { name: '活动中' },
        { name: '已结束' }
      ],
      activity: 0
    }
  },
  created() {},
  methods: {
    activityFn(i) {
      this.activity = i
    }
  }
}
</script>

<style scoped lang="scss">
.el-breadcrumb {
  padding: 30px 5px 24px;
}

.filter {
  border-radius: 4px;
  margin-bottom: 20px;
  background-color: #ffffff;

  div {
    float: left;
    padding: 20px 0 0 17px;
    font-size: 14px;
    line-height: 19px;
    color: #969696;
  }
}

ul {
  padding: 20px 0 0;
  margin-left: 117px;
  font-size: 0;

  .filter-item {
    display: inline-block;
    margin: 0 30px 20px 0;
    font-size: 14px;
    line-height: 19px;
    color: #282828;
    cursor: pointer;
    user-select: none;

    &.active_t {
      color: #2c8eff;
      font-weight: bold;
    }
  }
}

.recommend {
  padding-bottom: 30px;
  .el-col {
    margin-bottom: 14px;
    padding: 0 7px;
  }
  .el-col-6 {
    padding: 0 7px;
  }
  .el-row {
    margin-top: 30px;
    a {
      display: block;
      border-radius: 8px;
      background-color: #fff;
      overflow: hidden;
      transition: 0.3s;

      .el-image {
        display: block;
        width: 100%;
        height: 160px;
        position: relative;

        .type {
          position: absolute;
          right: 7px;
          bottom: 7px;
          z-index: 2;
          width: 20px;
          height: 20px;
          padding: 4px;
          border-radius: 50%;
          background-color: rgba(0, 0, 0, 0.5);
        }
      }

      .el-image + div {
        padding: 0 15px;
        color: #333;
        font-size: 13px;
      }
    }
  }

  .el-row a:hover {
    // transform: translateY(-6px);
    box-shadow: 0px 2px 15px rgb(79 109 143 / 15%);
  }

  .label-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    font-size: 14px;
    color: #999;
    border-top: 1px dashed #e9e9e9;
    .money {
      font-size: 14px;
      color: #ff6b00;
      span {
        font-size: 20px;
      }
    }
  }

  .browse-money {
    display: flex;
    align-items: center;
    padding: 10px 0 20px;
    font-size: 14px;
    line-height: 19px;
    color: #666666;

    .icon-huaban15 {
      margin-right: 6px;
      font-size: 14px;
      color: #2c8eff;
    }
  }

  .title {
    padding-top: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #333;
  }
}
</style>
